<template>
  <div>

    <div style='padding-top: 20px;'>
      <el-button type='primary' @click='collectionPosition'>收藏的职位</el-button>
      <el-button type='success' @click='followCompany'>关注的公司</el-button>
    </div>

    <div v-if='this.collectionPosition_display' style='padding-top: 20px;'>
      <div style='height: 30px;'>
        <input type='checkbox' :checked='clsAll.length === pojectClsAll.length' @click='checkedAll()'>全选
        <el-button
          size='mini'
          type='danger'
          style='float: right'
          @click='collectionPositionDel'>删除
        </el-button>

      </div>
      <div :span='24' v-for='(item, index) in collectionPositionList' :key='item.COLLECT_RECORD_ID'
           style='padding-top: 5px;'>
        <el-card>
          <div style='display: flex; align-items: center;'>
            <div style='padding-right: 20px'>
              <input type='checkbox' :checked='clsAll.indexOf(item.COLLECT_RECORD_ID)>=0'
                     @click='checkedOne(item.COLLECT_RECORD_ID)'>
            </div>
            <div style='flex: 1'>
              <el-descriptions class='margin-top' :column='2'>
                <el-descriptions-item label='招聘岗位'>{{ item.TITLE }}</el-descriptions-item>
                <el-descriptions-item label='薪酬待遇'>{{ item.WAGES || '面议' }}</el-descriptions-item>
                <el-descriptions-item label='企业名称'>{{ item.COMPANY }}</el-descriptions-item>
                <el-descriptions-item label='学历要求'>{{ item.EDUCATION || '暂无' }}</el-descriptions-item>
                <el-descriptions-item label='经验要求'>{{ item.EXP || '暂无' }}</el-descriptions-item>
                <el-descriptions-item label='工作地址'>{{ item.ADDRESS }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-card>
      </div>

      <!--分页条-->
      <el-pagination
        style='float: right'
        background
        @current-change='collectionPositionCurrentChange'
        :current-page='currentPage'
        :page-size='pageSize'
        layout='total,prev,pager,next'
        :total='totalNumber'>
      </el-pagination>
    </div>

    <!--收藏的公司名称-->
    <div v-if='this.followCompany_display' style='padding-top: 20px;'>

      <div style='height: 30px;'>
        <input type='checkbox' :checked='clsAll.length === pojectClsAll.length' @click='checkedAll()'>全选
        <el-button
          size='mini'
          type='danger'
          style='float: right'
          @click='followCompanyDel'>删除
        </el-button>
      </div>

      <div :span='24' v-for='(item, index) in followCompanyList' :key='item.COMPANY_FOLLOW_ID'
           style='padding-top: 5px;'>

        <el-card>
          <div style='display: flex; align-items: center;'>

            <div style='padding-right: 20px'>
              <input type='checkbox' :checked='clsAll.indexOf(item.COMPANY_FOLLOW_ID)>=0'
                     @click='checkedOne(item.COMPANY_FOLLOW_ID)'>
            </div>

            <div style='flex: 1'>
              <el-row>
                <el-col :span='3'>
                  <div class='grid-content bg-purple'>
                    <el-image :src='item.LOGO' fit='cover'></el-image>
                  </div>
                </el-col>
                <el-col :span='21'>
                  <div style='margin-left: 15px;'>
                    <strong>
                      {{ item.COMPANY }}
                    </strong>
                    <p>
                      {{ item.COMDESC }}
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>

      <!--分页条-->
      <el-pagination
        style='float: right'
        background
        @current-change='followCompanyCurrentChange'
        :current-page='currentPage'
        :page-size='pageSize'
        layout='total,prev,pager,next'
        :total='totalNumber'>
      </el-pagination>
    </div>
  </div>
</template>

<script>

import {
  getCollectionPositionList,
  getFollowCompanyList,
  delCollectionPositionByIdList,
  delFollowCompanyByIdList
} from '@/api/api'

export default {
  name: 'banShiZhiNan',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalNumber: 0,
      collectionPosition_display: true,
      followCompany_display: false,
      collectionPositionList: [],
      followCompanyList: [],
      isCheckedAll: false,
      pojectClsAll: [],
      clsAll: []
    }
  },
  created() {
    this.getCollectionPositionList()
    // this.getFollowCompanyList()
  },
  methods: {

    //单选
    checkedOne(id) {
      let idIndex = this.clsAll.indexOf(id)
      if (idIndex >= 0) {
        this.clsAll.splice(idIndex, 1)
      } else {
        this.clsAll.push(id)
      }
      console.log(this.clsAll)
    },

    //全选
    checkedAll() {
      this.isCheckedAll = !this.isCheckedAll
      if (this.isCheckedAll) {
        this.clsAll = []
        this.pojectClsAll.forEach(function (fruit) {
          this.clsAll.push(fruit)
        }, this)
      } else {
        this.clsAll = []
      }
    },

    collectionPosition() {
      this.collectionPosition_display = true
      this.followCompany_display = false
      this.currentPage = 1
      this.pageSize = 10
      this.collectionPositionList = []
      this.getCollectionPositionList()
    },

    followCompany() {
      this.collectionPosition_display = false
      this.followCompany_display = true
      this.currentPage = 1
      this.pageSize = 10
      this.followCompanyList = []
      this.getFollowCompanyList()
    },

    //删除收藏的职位
    collectionPositionDel() {
      let collectionPositionSize = this.clsAll.length
      if (collectionPositionSize <= 0) {
        alert('您没有选中任务数据！！！')
      }
      this.delCollectionPositionList(this.clsAll)
    },

    //删除收藏的公司
    followCompanyDel() {
      let followCompanySize = this.clsAll.length
      if (followCompanySize <= 0) {
        alert('您没有选中任务数据！！！')
      }
      this.delFollowCompanyList(this.clsAll)
    },

    //查询用户收藏的职位
    getCollectionPositionList() {
      const data = {
        PAGE: this.currentPage,
        PAGESIZE: this.pageSize
      }
      getCollectionPositionList(data)
        .then(res => {
          if (res.code == 200) {
            this.pojectClsAll = []
            this.clsAll = []
            this.collectionPositionList = res.data.DATA.list
            //处理全选操作
            this.collectionPositionList.forEach(function (fruit) {
              this.pojectClsAll.push(fruit.COLLECT_RECORD_ID)
            }, this)
            this.totalNumber = res.data.DATA.totalResult
            console.log('res.data.DATA.list', res.data.DATA.list)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    //查询用户收藏的公司
    getFollowCompanyList() {
      const data = {
        PAGE: this.currentPage,
        PAGESIZE: this.pageSize
      }
      getFollowCompanyList(data)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            this.pojectClsAll = []
            this.clsAll = []
            this.followCompanyList = res.data.DATA.list
            //处理全选操作
            this.followCompanyList.forEach(function (fruit) {
              this.pojectClsAll.push(fruit.COMPANY_FOLLOW_ID)
            }, this)

            res.data.DATA.list.forEach((item, index) => {
              console.log('=======', item)
            })

            this.totalNumber = res.data.DATA.totalResult
            console.log('res.data.DATA.list', res.data.DATA.list)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    //收藏的职位分页
    collectionPositionCurrentChange(val) {
      this.currentPage = val
      this.getCollectionPositionList()
    },

    //收藏的公司分页
    followCompanyCurrentChange(val) {
      this.currentPage = val
      this.getFollowCompanyList()
    },

    //删除选中的收藏职位
    delCollectionPositionList(list) {
      const data = {
        ids: list.join(',')
      }
      delCollectionPositionByIdList(data)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            console.log(res)
            this.getCollectionPositionList()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    //删除选中的收藏公司
    delFollowCompanyList(list) {
      const data = {
        ids: list.join(',')
      }
      delFollowCompanyByIdList(data)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            console.log(res)
            this.getFollowCompanyList()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
  }
}
</script>

<style lang='less' scoped>

</style>
